<!-- 钱包 -->
<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <div class="zanwei-top"></div>
    <div class="walletbox">
      <!-- <div class="profile">
        <div class="avatar">
          <div class="out_circle">
            <i class="iconfont icon-morentouxiang"></i>
          </div>
        </div>
        <div class="yhxx">
          <div class="yhm">
            <p>用户名:<span>{{userInfo.XF_SURNAME}}</span></p>
          </div>
          <div class="card_msg">
            <p>电子卡</p>
            <p class="jf">
              <span>{{userInfo.JFSUM.XF_BONUS}}</span> 积分</p>
          </div>
        </div>
      </div>-->
      <div class="image vip">
        <div class="vip_card">
          <div style="position: relative">
            <img id="cardimg" src="@/assets/img/vip.png" v-if="!isCjhy" />
            <img :src="hykimg" v-else />
            <span id="tteexxtt" class="tteexxtt" v-if="!isCjhy">{{tteexxtt}}</span>
            <span class="tteexxtt_cjvip" v-else>{{tteexxtt}}</span>
          </div>
          <!-- <canvas style="display:none" id="vipCard"></canvas> -->
          <div
            style="text-align: center;margin-top: .2rem;"
            v-if="isCjhy"
          >有效期:{{cjhyInfo.STARTTIME}}至{{cjhyInfo.ENDTIME}}</div>
        </div>
      </div>

      <div class="barcode">
        <barcode
          :value="barcode"
          :options="{ displayValue: false,height:50,width:2,format:'CODE128B'  }"
        />
      </div>
      <!-- <div class="hykh">
        电子卡:{{barcode}}
      </div>-->
      <div class="grxxbox">
        <!--<div class="line20"></div>-->
        <div class="jbxx" v-if="isCjhy">
          <ul>
            <li @click="toyhq(1)">
              <a>
                <p :style="textColor">{{cjhy_gwq}}</p>
                <h3>100元购物券</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
            <!--@click="goQd"-->
            <li @click="toyhq(2)">
              <a>
                <p :style="textColor">{{cjhy_srq}}</p>
                <h3>100元生日券</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
            <li @click="toyhq(3)">
              <a>
                <p :style="textColor">{{cjhy_tcq}}</p>
                <h3>2小时停车券</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
          </ul>
        </div>
        <div class="jbxx" v-if="false">
          <ul>
            <li>
              <a>
                <p :style="textColor">0</p>
                <h3>关注店铺</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
            <!--@click="goQd"-->
            <li>
              <a>
                <p :style="textColor">0</p>
                <h3>今日签到</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
            <li>
              <a>
                <p :style="textColor">0</p>
                <h3>消息</h3>
                <h3 style="opacity: 0;">(开发中)</h3>
              </a>
            </li>
          </ul>
        </div>
        <div class="line20"></div>
        <div class="qblist">
          <div class="hyzx">
            <i class="iconfont icon-kaitonghuiyuanyuan hyzxicon"></i>
            <p>会员中心</p>
          </div>
          <ul>
            <!--<router-link :to="{path:'/moreIntegralDetail'}">&lt;!&ndash;IntegralDetail 积分&ndash;&gt;

            </router-link>-->
            <li @click="clickHandler({path:'/moreIntegralDetail'})">
              <a>
                <!--<i class="iconfont icon-mingxi"></i>-->
                <h3>
                  积分明细
                  <span class="card_num" :style="textColor">(可用积分:{{sumjf}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <!--                        <router-link :to="{path:'/vipRights'}">-->
            <!--                        </router-link>-->
            <li @click="clickHandler({path:'/vipRights'})">
              <a>
                <!--<i class="iconfont icon-huiyuan"></i>-->
                <h3>会员权益</h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>

            <!--<router-link :to="{path:'/score'}">-->
            <!--<li>-->
            <!--<a href="">-->
            <!--&lt;!&ndash;<i class="iconfont icon-jifen"></i>&ndash;&gt;-->
            <!--<h3>积分兑换</h3>-->
            <!--<i class="iconfont icon-jiantou"></i>-->
            <!--</a>-->
            <!--</li>-->
            <!--</router-link>-->
          </ul>
        </div>
        <div class="line20"></div>
        <div class="qblist">
          <div class="hyzx">
            <i class="iconfont icon-qiaquanguanli wdqbicon"></i>
            <p>我的券包</p>
          </div>
          <ul>
            <li>
              <a>
                <!--<i class="iconfont icon-huiyuan"></i>-->
                <h3>
                  我的现金红包
                  <span id="myl" :style="textColor">{{mylb}}</span>元
                </h3>
              </a>
            </li>
            <!-- <router-link :to="{path:'/DiscountTicket',query:{type:'yhq'}}">
            </router-link>-->
            <li @click="clickHandler({path:'/DiscountTicket',query:{type:'yhq'}})">
              <a>
                <!--<i class="iconfont icon-mingxi"></i>-->
                <h3>
                  优惠券
                  <span class="card_num" :style="textColor">({{yhqNum}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>

            <!--<router-link :to="{path:'/DiscountTicket',query:{type:'hdq'}}">
            </router-link>-->
            <li @click="clickHandler({path:'/DiscountTicket',query:{type:'hdq'}})">
              <a>
                <!--<i class="iconfont icon-jifen"></i>-->
                <h3>
                  活动券
                  <span class="card_num" :style="textColor">({{hdqNum}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <!--
                        <router-link :to="{path:'/DiscountTicket',query:{type:'lpdhq'}}">
            </router-link>-->
            <li @click="clickHandler({path:'/DiscountTicket',query:{type:'lpdhq'}})">
              <a>
                <!--<i class="iconfont icon-kaquan"></i>-->
                <h3>
                  礼品兑换券
                  <span class="card_num" :style="textColor">({{lpdhqNum}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>

            <!--<router-link :to="{path:'/DiscountTicketJp'}">
            </router-link>-->
            <li @click="clickHandler({path:'/DiscountTicketJp'})">
              <a>
                <!--<i class="iconfont icon-kaquan"></i>-->
                <h3>
                  我的奖品
                  <span class="card_num" :style="textColor">({{jpdata.count}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>

            <!--<router-link :to="{path:'/DiscountTicket',query:{type:'jfhll'}}">
            </router-link>-->
            <li @click="clickHandler({path:'/DiscountTicket',query:{type:'jfhll'}})">
              <a>
                <!--<i class="iconfont icon-kaquan"></i>-->
                <h3>
                  积分换流量
                  <span class="card_num" :style="textColor">({{jfhllNum}})</span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <li @click="clickHandler({path:'/Parking'})">
              <a>
                <h3>
                  我的停车券
                  <span class="card_num" :style="textColor"></span>
                </h3>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <!-- <router-link style="display:none" :to="{path:'/Parking'}">

            </router-link>-->
          </ul>
        </div>
      </div>

      <!--<div class="exit">-->
      <!--<p>会员:{{userInfo.XF_SURNAME}}</p>-->
      <!--<mt-button type="primary" size="large" @click.native="exitLogin">退出登录</mt-button>-->
      <!--</div>-->
    </div>
    <div class="zanwei-bottom" style="background: #f7f7f7"></div>
    <!-- 底部导航 -->
    <!--<foot-nav></foot-nav>-->
  </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
import api from "@/api/api";
import imgurl from "@/assets/img/vip.png";

export default {
  data() {
    return {
      isBack: false,
      barcode: "0120000043",
      userInfo: {
        JFSUM: {
          XF_BONUS: ""
        }
      },
      canvasWidth: 0,
      canvasHeight: 0,
      yhqNum: 0,
      lpdhqNum: 0,
      hdqNum: 0,
      jfhllNum: 0,
      showOriginImg: true,
      tteexxtt: "",
      jpdata: {},
      tcqNum: 0,
      mylb: 0,
      isCjhy: false,
      cjhyInfo: {},
      hykimg: "",
      cjhy_gwq: 0,
      cjhy_srq: 0,
      cjhy_tcq: 0,
      sumjf: 0
    };
  },
  methods: {
    toyhq(par) {
      if (this.$util.checkValidity()) {
        this.$router.push(
          "SuperVipDiscountTicket/" + this.cjhyInfo.HYKID + "/" + par
        );
      }
    },
    clickHandler(par) {
      if (this.$util.checkValidity()) {
        this.$router.push(par);
      }
    },
    exitLogin() {
      MessageBox.confirm("是否退出登陆", "提示").then(
        confirm => {
          Toast("退出成功");
        },
        cancel => {}
      );
    },
    change() {
      this.barcode = (Math.random().toFixed(10) * 10000000000).toFixed(0);
    },
    showVipId(text) {
      // let img = document.getElementById('cardimg');
      var img = new Image();
      img.src = imgurl;
      img.onload = function() {
        console.log(img.width);
        console.log(img.height);
        let imgwidth = img.width / 100 - 0.4 + "rem";
        let imgheight = img.height / 100 - 0.4 + "rem";
        let canvas = document.getElementById("vipCard");
        canvas.style.width = imgwidth;
        canvas.style.height = imgheight;

        let mCtx = canvas.getContext("2d");
        // let textMarginLeft = img.width * .1;
        // let textMarginBottom = img.height * .1;
        // let fontSize = (img.width - textMarginLeft * 2) / text.length;
        // mCtx.font = fontSize + "px Arial";
        // mCtx.font = fontSize + "rem Arial";
        // let textWidth = mCtx.measureText(text).width;
        mCtx.drawImage(
          img,
          0,
          0,
          img.width,
          img.height,
          0,
          0,
          canvas.width,
          canvas.height
        );
        mCtx.fillStyle = "#999";
        mCtx.fillText(text, 20, canvas.height - 20);
        canvas.style.display = "block";
        // img.style = 'display:none';
        // this.showOriginImg = false;
      };
    },
    // 签到
    goQd() {
      this.$router.push("/signed");
    }
  },
  components: {},
  mounted: function() {
    let that = this;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo && userinfo.vipcode) {
    } else {
      Toast({
        message: "您还不是会员，快去注册吧！",
        duration: 1200
      });
      setTimeout(function() {
        //        that.$router.push('/register')
        that.$router.push({ path: "/register", query: { type: "wallet" } });
      }, 1500);
      return;
    }
    // that.showVipId('lslslslls');
    api.getUserInfo(this, res => {
      console.log(res);
      console.log("zz");
      that.$util.checkValidity();
      let data = res.data;
      if (data.code === 0) {
        that.userInfo = data.data;
        that.barcode = data.data.XF_VIPCODE ? data.data.XF_VIPCODE : "无法获取";
        let vipid =
          "No." +
          data.data.XF_NEWVIPCODE.substr(0, 5) +
          " " +
          data.data.XF_NEWVIPCODE.substr(5, data.data.XF_NEWVIPCODE.length);
        // that.showVipId(vipid);
        that.tteexxtt = vipid;
      } else if (data.code === 9999) {
        //orcal数据库异常 关闭当前窗口
        MessageBox.alert(data.msg, "温馨提示").then(action => {
          wx.closeWindow();
        });
      } else {
        console.log(data.msg);
      }
    });
    // let img = document.getElementById('cardimg');
    // img.onload = function () {
    //   that.canvasWidth = img.width;s
    //   that.canvasHeight = img.height;
    // };

    let vipcode = JSON.parse(sessionStorage.getItem("userinfo")).vipcode;
    let num = 1;
    let row = 1000;
    api.getUserOrderList(
      this,
      res => {
        console.log(res);
        let data = JSON.parse(res.data.data);
        this.yhqNum = data.total;
      },
      row,
      num,
      1,
      0,
      vipcode
    );
    api.getUserOrderList(
      this,
      res => {
        console.log(res);
        let data = JSON.parse(res.data.data);
        this.hdqNum = data.total;
      },
      row,
      num,
      2,
      0,
      vipcode
    );
    api.getUserOrderList(
      this,
      res => {
        console.log(res);
        let data = JSON.parse(res.data.data);
        this.lpdhqNum = data.total;
      },
      row,
      num,
      3,
      0,
      vipcode
    );

    api.getHdUserZjList(1, 1, "0", this, res => {
      var jpdata = res.data.data;
      that.jpdata = jpdata;
      console.log(res, "奖品信息");
    });
    api.getUserOrderList(
      this,
      res => {
        console.log(res);
        let data = JSON.parse(res.data.data);
        this.jfhllNum = data.total;
      },
      row,
      num,
      5,
      0,
      vipcode
    );
    //获取乐币
    api.getUserLbCount(this, vipcode, res => {
      let data = res.data;
      if (data.code == 0) {
        that.mylb = data.data;
        if (that.mylb == "" || that.mylb == null || that.mylb == undefined) {
          that.mylb = 0;
        }
      }
    });
    //获取是否是超级会员
    api.getCjhykByVipCode(this, vipcode, res => {
      let data = res.data;
      console.log(res, "超级会员卡");
      if (data.code == 0) {
        if (res.data.data != null && res.data.data != undefined) {
          //是超级会员
          that.isCjhy = true;
          that.cjhyInfo = res.data.data;
          that.hykimg =
            that.host.filehost + res.data.data.CJHYKINFO.CJHYK[0].ID;
          //获取超级会员优惠券
          api.getCjhyYhqList(
            that,
            vipcode,
            res.data.data.HYKID,
            1,
            1,
            1,
            0,
            res => {
              if (res.data.code == 0) {
                that.cjhy_gwq = res.data.data.count;
              }
            }
          );
          api.getCjhyYhqList(
            that,
            vipcode,
            res.data.data.HYKID,
            2,
            1,
            1,
            0,
            res => {
              if (res.data.code == 0) {
                that.cjhy_srq = res.data.data.count;
              }
            }
          );
          api.getCjhyYhqList(
            that,
            vipcode,
            res.data.data.HYKID,
            3,
            1,
            1,
            0,
            res => {
              if (res.data.code == 0) {
                that.cjhy_tcq = res.data.data.count;
              }
            }
          );
        }
      }
    });

    //获取会员积分总数
    api.getUserInfo_jf(this, res => {
      if (res.data.code == 0) {
        that.sumjf = res.data.data;
      }
      console.log(res, "==积分总数");
    });
    // that.showVipId('No.01200 00043');
  }
};
</script>

<style scoped lang="less">
li {
  list-style: none;
}

.walletbox {
  background: #fff;

  .vip {
    padding: 0.2rem;

    .vip_card {
      border: 1px solid #eeeeee;
      padding: 0.3rem;
      border-radius: 0.2rem;
      position: relative;
    }
  }

  .barcode {
    display: flex;
    justify-content: center;
  }

  .hykh {
    /*margin: 0 .7rem .5rem 0.7rem;*/
    /*height: 0.7rem;*/
    /*line-height: 0.7rem;*/
    text-align: center;
    font-size: 0.3rem;
  }

  .jbxx {
    ul {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 0.06rem 0.36rem 0.06rem 0.36rem;

      li:nth-child(2) {
        border-left: 0;
        border-right: 0;
      }

      li {
        width: 33.33333%;
        border: 1px solid #f1f1f1;
        padding: 0.07rem;

        a {
          text-align: center;

          p {
            color: #d90916;
            font-weight: bold;
            font-size: 0.5rem;
          }

          h3 {
            font-weight: normal;
            font-size: 0.2rem;
          }
        }
      }

      li:last-child {
        /*border-right: 0;*/
      }
    }
  }
}

// 钱包list
.qblist {
  display: flex;
  align-items: center;

  .hyzx {
    padding: 0.3rem;
    font-size: 14pt;
    text-align: center;

    p {
      margin-top: 0.2rem;
    }

    .wdqbicon {
      color: #bad269;
      font-size: 0.6rem;
    }

    .hyzxicon {
      color: #75bfe5;
      font-size: 0.6rem;
    }
  }

  ul {
    flex: 1;

    li {
      border-bottom: 1px solid #f1f1f1;

      a {
        display: flex;
        justify-content: space-between;
        // align-content: center;
        align-items: center;
        padding: 0.3rem 0;

        i {
          font-size: 0.42rem;
          /*width: .4rem;*/
          color: #d90916;
        }

        i:last-child {
          color: #ccc;
        }

        h3 {
          flex: auto;
          font-weight: normal;
          /*padding-left: 0.2rem;*/
          font-size: 0.36rem;
          display: flex;
          align-items: center;

          .card_num {
            font-size: 0.28rem;
            color: red;
            margin-left: 0.05rem;
          }
        }
      }
    }
  }
}

.profile {
  display: flex;
  padding: 0.2rem;

  .avatar {
    padding: 0.1rem;
    background: #f4f4f4;
    border-radius: 50%;

    .out_circle {
      padding: 0.17rem;
      background: #cbcbcb;
      border-radius: 50%;

      i {
        font-size: 1rem;
        color: #8a8a8a;
        /*background: #cbcbcb;*/
        border-radius: 50%;
      }
    }
  }

  .yhxx {
    margin-left: 0.1rem;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    font-size: 0.3rem;

    .card_msg {
      display: flex;

      .jf {
        margin-left: 0.1rem;

        span {
          color: red;
        }
      }
    }
  }
}

.exit {
  background: #e5e5e5;
  padding: 0.2rem 0.4rem;

  p {
    padding: 0 0 0.4rem 0;
    font-size: 0.3rem;
  }

  .mint-button {
    margin-bottom: 1rem;
  }
}

.tteexxtt {
  color: #999;
  font-size: 0.4rem;
  position: absolute;
  left: 1rem;
  bottom: 0.13rem;
}

.tteexxtt_cjvip {
  color: #999;
  font-size: 0.3rem;
  position: absolute;
  left: 0.5rem;
  bottom: 0.13rem;
}
</style>
